<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- <h2>组织架构</h2> -->
      <el-card
        v-loading="loading"
        class="tree-card"
        element-loading-text="拼命加载中"
      >
        <!-- 用了一个行列布局 -->
        <treeToolsVue
          v-loading="loading"
          element-loading-text="拼命加载中"
          :node-data="company"
          :is-root="true"
          @opendilog="opendilog"
        />
        <el-tree :data="departs" :props="defaultProps">
          <!--用了默认插槽 并且解构了数据（父组件传过来的数据） -->
          <!-- <template #default="{ node, data }"> -->
          <template #default="{ data }">
            <!-- node 底层一节点信息 -->
            <!-- data 是 数组层面的信息 -->
            <!-- <div>111{{ node.label }}-{{ data }}</div> -->
            <treeToolsVue
              v-loading="loading"
              element-loading-text="拼命加载中"
              :node-data="data"
              @del-depts="getDepartmentsList()"
              @opendilog="opendilog"
              @editDepts="editDepts"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- <el-card>
        <el-row>
          <el-col>1</el-col>
        </el-row>

      </el-card> -->
      <!-- .sync修饰符 用来方便子和父亲 通信的 -->
      <add-dept
        ref="addDept"
        :dialog-visible.sync="dialogVisible"
        :original-departs="originalDeparts"
        :node-data="nodeData"
        @addDept="getDepartmentsList()"
      />
      <!--  @closeDialog="dialogVisible = false" -->
    </div>
  </div>
</template>

<script>
import treeToolsVue from '@/views/departments/components/tree-tools.vue' // 引入属性组件
import AddDept from './components/add-dept' // 引入新增部门组件
import { reqGetDepartments } from '@/api/departments'

export default {
  components: {
    treeToolsVue,
    AddDept
  },
  data() {
    return {
      loading: false, // 加载效果
      dialogVisible: false,
      departs: [], // 存储的数据
      company: {}, // 公司信息
      originalDeparts: [], // 存储原始数据
      nodeData: {}, // 点击添加子部门拿到当前的部门
      defaultProps: {
        label: 'name',
        children: 'children'
      }
      // defaultProps: {
      //   // 建立映射关系
      //   // tree组件原本的label映射成title
      //   // tree组件原本的children映射son
      //   // children: 'children',
      //   // label: 'label'
      //   label: 'title',
      //   children: 'son'
      // }
    }
  },
  created() {
    this.getDepartmentsList()
  },
  // async created() {
  //   // const res = await reqGetDepartments()
  //   // console.log(res)
  //   // 接口返回的数据都是同级的  所以通过递归来解决这种问题
  //   // pid :-1 表示顶级组织架构 '' 代表一级组合值架构 不为空的时候 代表父级组织架构的ID
  //   const {
  //     data: { depts }
  //   } = await reqGetDepartments()
  //   // 定义一个data 存放 递归调用函数的返回数据 这里请求的是‘’ 一级的数据

  //   const data = this.recursionDepartsFn(depts, '')

  //   this.departs = data
  // },
  methods: {
    async getDepartmentsList() {
      // 获取数据前设置加载中
      this.loading = true
      const { data } = await reqGetDepartments()
      this.company = {
        name: data.companyName,
        manager: data.companyManage,
        id: ''
      }
      this.originalDeparts = data.depts // 返回的原始数据

      // console.log(data.depts)
      const departs = this.recursionDepartsFn(data.depts, '')
      this.departs = departs
      // 关闭效果
      this.loading = false
    },

    // async getDepartmentsList() {
    //   const {
    //     data: { depts }
    //   } = await reqGetDepartments()
    //   // const { data } = await reqGetDepartments()
    //   // 定义一个data 存放 递归调用函数的返回数据 这里请求的是‘’ 一级的数据
    //   // this.company = {
    //   //   name: data.companyName,
    //   //   manager: '负责人'
    //   // }
    //   const data = this.recursionDepartsFn(depts, '')

    //   this.departs = data
    // },
    // 递归处理后台返回的数据（递归就是自己调用自己）
    recursionDepartsFn(data, value) {
      // console.log(data)
      // 建立一个数组来进行数据存储
      const list = []
      // 遍历data 数据
      data.forEach((item) => {
        // 根据当前元素的pid和传入的value的值进行判断当前是几级
        if (item.pid === value) {
          // 定义一个存储二级数据的属性 然后递归调用函数 传入 当前数据并，并且传入ID来判断
          const children = this.recursionDepartsFn(data, item.id)
          // 判断一下 存储二级数据的属性是否有数据 有才进行存储
          if (children.length > 0) {
            item.children = children
          }
          list.push(item)
        }
      })
      return list
    },
    // handleNodeClick(data) {
    //   console.log(data)
    // },
    opendilog(data) {
      this.dialogVisible = true
      this.nodeData = data
      // 父组件调用子组件的方法
      // this.$refs.addDept.getSimpleList()
      // 直接修改 子组件的的展示信息
      // this.$refs.addDept.showTitle = '新增部门'
    },
    editDepts(nodeData) {
      // this.$refs.addDept.showTitle = '编辑部门'
      this.dialogVisible = true
      this.nodeData = nodeData
      this.$nextTick(() => {
        this.$refs.addDept.getDepartmentsDetails()
      })

      // this.$refs.addDept.getDepartmentsDetails(this.nodeData.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url('~@/assets/common/add-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url('~@/assets/common/minus-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url('~@/assets/common/user-filling.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
